<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num1 += 10">改变num1</button>
        <p>{{ num1 }}</p>
        <p>{{ num2 }}</p>

        <!-- 计算属性虽然本质上是函数 -->
        <!-- 但是用的时候要当属性来用,所以不要加小括号 -->
        <!-- 普通属性怎么用,计算属性就可以怎么用 -->
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
    </div>

    <script src="./vue.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                num1: 10,
                num2: 20
            },

            computed: {
                // 函数的写法
                // 所以计算属性的本质可以理解为是一个函数
                // 计算属性特点: 第一次调用会得到一个结果,然后把结果缓存起来
                // 后面调用都是直接从缓存里面拿出来的
                // 什么时候会重新调用?
                //   当计算属性的 `依赖项` 发生改变就会来调用再重新计算一个结果并再次缓存起来
                // 此时当num1或num2有一个发生改变,它都会来重新调用再计算得到一个结果,然后再次缓存起来
                sum () {
                    console.log('调用了')
                    return this.num1 + this.num2
                }
            }
        })
    </script>
</body>
</html>